<template>
  <el-button v-bind="$attrs" :style="`width: ${width}px`" :class="border ? `FI-btn__border` : ''">
    <slot name="prefix"> <i :class="`font_family ${prefixIcon} icon_prefix`" /> </slot>
    <slot><i v-if="iconBtnName" :class="`font_family ${iconBtnName}`" /></slot>
    <slot name="suffix"> <i :class="`font_family ${suffixIcon} icon_suffix`" /> </slot>
  </el-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'OyButton',
  props: {
    // 左侧按钮图标名称
    prefixIcon: {
      type: String,
      default: '',
    },
    // 右侧侧按钮图标名称
    suffixIcon: {
      type: String,
      default: '',
    },
    // 图标btn
    iconBtnName: {
      type: String,
      default: '',
    },
    // 边框按钮样式
    border: {
      type: Boolean,
      default: false,
    },
    width: {
      type: [String, Number],
      default: '',
    },
  },
  setup(prop) {
    return {}
  },
})
</script>
<style lang="less" scoped>
.icon_prefix {
  margin-right: 4px;
}
.icon_suffix {
  margin-left: 4px;
}
.FI-btn__border {
  background: #ffffff;
  border-radius: 2px;
  color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  &:hover {
    background: var(--el-color-primary-light-9);
  }
  &:active {
    background: var(--el-color-primary-light-9);
  }
}
</style>
